import React, { useEffect, useState } from 'react';
import a from './articleDetail.module.scss'
import Welcome from '../../../components/Welcome';
import { useSearchParams } from 'react-router-dom';
import axios from 'axios';
import { nyr } from '../../../utils/tool';



function articleDetail() {
    /* -------------------------- 根据article_id请求文章的详细信息 ------------------------- */
    const [searchParams, setSearchParams] = useSearchParams()
    const article_id = searchParams.getAll('article_id')
    const [articleDetail, setArticleDetail] = useState<any>()
    const getArticleDetails = async () => {
        let { data } = await axios({
            url: 'http://localhost:8080/api/article/getDetail?article_id=' + article_id,
            method: 'get',

        })
        if (data.code == 200) {
            setArticleDetail(data.data[0])
        }
    }
    useEffect(() => {
        getArticleDetails()
    })

    return (
        <div className={a.page}>
            <div className={a.container}>
                <div className={a.welcome}>
                    <Welcome backState={true}></Welcome>
                </div>
                <div className={a.content}>
                    <div className={a.leftMain}>
                        <div className={a.leftTitle}>{articleDetail?.article_title}</div>
                        <div className={a.leftAuthor}>
                            <div>{articleDetail?.user_name}</div>
                            <div>{nyr(new Date(articleDetail?.article_time * 1), '-')}</div>
                        </div>
                        <div className={a.leftIntro}>{articleDetail?.article_introduction}</div>
                        <div className={a.leftContent} dangerouslySetInnerHTML={{ __html: articleDetail?.article_content }} ></div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default articleDetail;